<template>
  <div>
    <el-dialog title="答卷信息" :visible.sync="isshow" width="800px">
      <div ref="printAnswer">
        <div class="toptitle">
          <div>序号：{{ index }}</div>
          <div>填写时间：{{ survey.createTime | fifterTime }}</div>
        </div>

        <div
          v-for="(item, index) in survey.questionList"
          :key="index"
          class="questionitem"
        >
          <!-- 问题 -->
          <div :class="item.requiredFlag == 1 ? 'required title' : 'title'">
            <div>{{ index + 1 }}、</div>
            <div v-html="item.questionName"></div>
            <div style="min-width: 80px;white-space: nowrap;">【{{ typeList[item.questionType - 1] }}】</div>
          </div>
          <!-- 答案 -->
          <div style="margin-top: 10px" v-if="item.questionType == 2">
            <template v-for="(key,i) of Object.keys(item.answerMap)">
              {{ item.answerMap[key].optionName }}
              <template v-if="item.answerMap[key].answerContent">
                〖{{
                  item.answerMap[key].answerContent
                }}〗
              </template>
              <template v-if="i!=Object.keys(item.answerMap).length-1">┋</template>
            </template>
          </div>
          <div style="margin-top: 10px" v-if="item.questionType == 3">
            <template v-for="key of Object.keys(item.answerMap)">
              <template
                v-for="(e,i) of JSON.parse(item.answerMap[key].answerContent)"
              >
                〖 {{ e }}〗
                <template v-if="i!=JSON.parse(item.answerMap[key].answerContent).length-1">┋</template>
              </template>
            </template>
          </div>
          <div
            style="margin-top: 10px"
            v-if="item.questionType == 4"
          >
            <template v-for="key of Object.keys(item.answerMap)">
              {{
                item.answerMap[key].answerContent
              }}
            </template>
          </div>
          <div
            style="margin-top: 10px"
            v-if="item.questionType == 1"
          >
            <template v-for="key of Object.keys(item.answerMap)">
              {{ item.answerMap[key].optionName }}
              <template v-if="item.answerMap[key].answerContent">
                〖{{
                  item.answerMap[key].answerContent
                }}〗
              </template>
            </template>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printAnswer">打印</el-button>
        <el-button type="primary" @click="loadSurvey">下载</el-button>
        <el-button type="primary" @click="isshow = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { exportSurvey, getAnswerMsg } from '@/api/questions/statistics'

export default {
  name: 'MixedStateAdminAnswerMsg',

  data() {
    return {
      isshow: false,
      index: '1',
      id: '',
      survey: {
        id: 1,
        addtime: '2013-11-14 16:21:23',
        usetime: '121秒',
        questionList: []
      },
      typeList: ['单选题', '多选题', '填空题', '简答题']
    }
  },
// 过滤时间
  filters: {
    fifterTime(value) {
      if (!value) return ''
      const time = new Date(value)
      const newDate = new Date(
        time.getFullYear(),
        time.getMonth(),
        time.getDate(), // 减一天
        time.getHours() + 8,
        time.getMinutes(),
        time.getSeconds()
      )
      return newDate.toISOString().replace('T', ' ').slice(0, 19).replace('T', ' ')
    }

  },
  mounted() {
  },

  methods: {
    show(id, index) {
      this.id = id
      this.index = index + 1
      this.getList()
      this.isshow = true
    },
    getList() {
      // 使用id获取后端数据
      getAnswerMsg({ surveyUserId: this.id }).then((res) => {
        this.survey = res.data
      })
    },
    // 打印答卷信息
    printAnswer() {
      this.$html2canvas(this.$refs.printAnswer, {
        backgroundColor: 'white',
        useCORS: true,
        foreignObjectRendering: false,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight
      }).then((canvas) => {
        const url = canvas.toDataURL()
        this.img = url
        this.$print({
          printable: url,
          type: 'image',
          documentTitle: '--',
          base64: 'true'
        })
      })
    },
    // 问卷下载
    loadSurvey() {
      exportSurvey({ surveyUserId: this.id, answerNo: this.index }).then(
        (res) => {
          const blob = new Blob([res], { type: '' })
          let fileName = '答卷.docx'
          if ('download' in document.createElement('a')) {
            const link = document.createElement('a')
            link.download = fileName
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          } else {
            navigator.msSaveBlob(blob.fileName)
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.toptitle {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  background-color: #fafbfc;
  border-bottom: 2px solid #4c9ef3;
}

.changebtns {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.questionitem {
  padding: 20px 0;
  border-bottom: 1px dotted #ddd;
}

.title {
  display: flex;
  font-size: 18px;
  // font-weight: bold;
  align-items: center;
}

.required::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>
